<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>口算练习</title>
    <meta name="description" content="">
    <meta name="keywords" content=""> 
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery-labelauty.js"></script> 
    <link rel="stylesheet" rev="stylesheet" href="buttons.css" type="text/css" media="all" />
    <link rel="stylesheet" rev="stylesheet" href="jquery-labelauty.css" type="text/css" media="all" />
    <style type="text/css">
    *.button {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .proShow {
        font-size: 50px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        font-family: "Arial", "Microsoft YaHei", "黑体";
    }
    * {
        margin: 0;
        padding: 0;
    }
    div {
        margin: 0px auto;
        text-align: center;
    }
    .btnDiv span {
        margin: 20px;
    }
    ul {
        list-style-type: none;
        text-align: center;
        margin-top: 50px;
    }
    li {
        display: inline-block;
    }
    li {
        margin: 10px 20px;
    }
    input.labelauty+label {
        font: 12px "Microsoft Yahei";
    }
    #mainWin {
        width: 80%;
        border-color: rgb(16, 129, 56);
        border-style: dashed;
        border-width: 2px;
        margin: 30px auto;
    }
    .titlebox {
        color: #0a693e;
        font-size: 50px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-family: "Arial", "Microsoft YaHei", "黑体";
    }
    </style>
</head>

<body>
    <div class="titlebox">口算练习</div>
    <div id="mainWin">
        <ul class="dowebok">
            <li>
                <input id="sltPlus" checked type="radio" name="radio" data-labelauty="加法运算">
            </li>
            <li>
                <input id="sltMult" type="radio" name="radio" data-labelauty="乘法运算">
            </li>
        </ul>
        <div id="mainDiv" class="proShow"></div>
        <div class="btnDiv">
            <span class="button button-primary button-rounded button-large unselectable showPro">出题</span>
            <span class="button button-primary button-rounded button-large unselectable showAns">答案</span>
        </div>
    </div>
    <script>
    var minA = 10,
        maxA = 50;
    var minB = 10,
        maxB = 50;
    var minA_ = 1,
        maxA_ = 10;
    var minB_ = 1,
        maxB_ = 10;
    var A = 0;
    var B = 0;
    var op = "+";
    var proText = "";
    $(':input').labelauty();
    $("#mainDiv").html("Ready");
    $(function() {
            $(".showPro").click(function() {
                showPro();
            });
            $(".showAns").click(function() {
                showAns();
            });
            $("#sltPlus").click(function() {
                op = "+";
                showPro();
            });
            $("#sltMult").click(function() {
                op = "×";
                showPro();
            });
        }
    );
    function showPro() {
        if (op === "+") {
            A = randomNum(minA, maxA);
            B = randomNum(minB, maxB);
        } else {
            A = randomNum(minA_, maxA_);
            B = randomNum(minB_, maxB_);
        }
        proText = A + op + B + "=?";
        $("#mainDiv").text(proText);
    }
    var ans = 0;
    function showAns() {
        if (op === "+") {
            ans = A + B;
        } else {
            ans = A * B;
        }
        proText = A + op + B + "=" + ans;
        $("#mainDiv").text(proText);
    }
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
                break;
            default:
                return 0;
                break;
        }
    }
    </script>
</body>

</html>
